<script setup lang="ts">
import { reactive, ref } from 'vue';
import constant from "@/utils/constant"
import { useAuthenticationApi } from '@/apis/login'
import { onLoad } from '@dcloudio/uni-app'
import { useUserStore } from '@/store/user'

onLoad((options: any) =>{
	const userInfo = JSON.parse(decodeURIComponent(options.info))
	description.value = userInfo.overruleCause
	for (const key in form) {
		form[key] = userInfo[key]
	}
})

const userStore = useUserStore()
const description = ref("")

const form = reactive({
	idNum: "",
	drivingLicenseNum: "",
	drivingLicenseIssuingAuthority: "",
	drivingLicenseEffectiveTime: "",
	drivingLicenseExtTime: "",
	qualificationCertificateNum: "",
	emergencyContact: "",
	emergencyContactPhone: "",
	address: "",
	creditCardNum: "",
	idCardObvImg: "",
	idCardRevImg: "",
	drivingLicenseImg: "",
	transportPermitImg: "",
	peopleLicenseImg: "",
}) 
const formRef = ref()
const images = reactive<any>({
	idCardObvImg: [],
	idCardRevImg: [],
	drivingLicenseImg: [],
	transportPermitImg: [],
	peopleLicenseImg: [],
})
const rules = {
	idNum: {required: true,message: '必须填写个人证件号',trigger: ['change','blur']},
	drivingLicenseNum: {required: true,message: '必须填写驾驶证号',trigger: ['change','blur']},
	drivingLicenseIssuingAuthority: {required: true,message: '必须填写驾驶证发证机关',trigger: ['change','blur']},
	drivingLicenseEffectiveTime: {required: true,message: '必须填写驾驶证生效时间',trigger: ['change','blur']},
	drivingLicenseExtTime: {required: true,message: '必须填写驾驶证失效时间',trigger: ['change','blur']},
	qualificationCertificateNum: {required: true,message: '必须填写从业资格证编号',trigger: ['change','blur']},
	emergencyContact: {required: true,message: '必须填写紧急联系人',trigger: ['change','blur']},
	emergencyContactPhone: {
		required: true, 
		trigger: ['change','blur'],
		pattern: /^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/,
		transform(value: any) {
			return String(value);
		},
		message: '请输入正确的手机号'},
	address: {required: true,message: '必须填写居住地址',trigger: ['change','blur']},
	creditCardNum: {required: true,message: '必须填写银行卡号',trigger: ['change','blur']},
	idCardObvImg: {required: true,message: '必须上传身份证正面',trigger: ['change','blur']},
	idCardRevImg: {required: true,message: '必须上传身份证反面',trigger: ['change','blur']},
	drivingLicenseImg: {required: true,message: '必须上传驾驶证',trigger: ['change','blur']},
	transportPermitImg: {required: true,message: '必须上传道路运输从业资格证',trigger: ['change','blur']},
	peopleLicenseImg: {required: true,message: '必须上传道人证合一(身份证)',trigger: ['change','blur']}
}
function deletePic(event, key: string){
  images[key].splice(event.index, 1);
  form[key] = ""
}
	
async function afterRead(event, key: string){
  // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
	const lists: any = [].concat(event.file);
	let fileListLen = images[key].length;
	lists.forEach((item: any) => {
	images[key].push({
	    ...item,
	    status: 'uploading',
		message: '上传中',
		});
	});
	for (let i = 0; i < lists.length; i++) {
		const result = await uploadFilePromise(lists[i].url);
		const item = images[key][fileListLen];
		images[key].splice(fileListLen, 1, {
			...item,
			status: 'success',
			message: '',
			url: result,
		});
		form[key] = JSON.parse(result as string).data
		fileListLen++;
	}
};
	
	
function uploadFilePromise(url){
	return new Promise((resolve) => {
		uni.uploadFile({
			url: constant.uploadUrl, // 仅为示例，非真实的接口地址
			filePath: url,
			name: 'file',
			header: {
				Authorization: userStore.token
			},
			formData: {
			},
			success: (res: any) => {
				setTimeout(() => {
					resolve(res.data);
				}, 1000)
			}
	    });
	});
};
	
function submit(){
	console.log(form);
	formRef.value.validate().then(valid => {
		if(valid){
			uni.showLoading({
				title: "正在提交数据"
			})
			useAuthenticationApi(form).then(()=> {
				uni.hideLoading()
				uni.redirectTo({
					url: "/pages/authentication/loading"
				})
			})
		}
	})
}
	

</script>

<template>
	<view style="padding: 10px 20px">
		<u-alert v-if="!!description" title="驳回原因"  type="warning" :closable="true" :description = "description"/>
		<u-form :model="form" ref="formRef" :rules="rules" label-position="top">
			<u-form-item prop="idNum" label="身份证号" :required="true" label-width="125" borderBottom>
				<u-input v-model="form.idNum" border="none" placeholder="必须填写身份证号"/>
			</u-form-item>
			<u-form-item prop="drivingLicenseNum" label="驾驶证号" :required="true" label-width="100" borderBottom>
				<u-input v-model="form.drivingLicenseNum" border="none" placeholder="必须填写驾驶证号"/>
			</u-form-item>
			<u-form-item prop="drivingLicenseIssuingAuthority" label="驾驶证发证机关" :required="true" label-width="125" borderBottom>
				<u-input v-model="form.drivingLicenseIssuingAuthority" border="none" placeholder="必须填写驾驶证发证机关"/>
			</u-form-item>
			<u-form-item prop="drivingLicenseEffectiveTime" label="驾驶证生效时间" :required="true" label-width="120" borderBottom>
				<u-input v-model="form.drivingLicenseEffectiveTime" border="none" placeholder="必须填写驾驶证生效时间"/>
			</u-form-item>
			<u-form-item prop="drivingLicenseExtTime" label="驾驶证过期时间" :required="true" label-width="120" borderBottom>
				<u-input v-model="form.drivingLicenseExtTime" border="none" placeholder="必须填写驾驶证过期时间"/>
			</u-form-item>
			<u-form-item prop="emergencyContact" label="紧急联系人" :required="true" label-width="100" borderBottom>
				<u-input v-model="form.emergencyContact" border="none" placeholder="必须填写紧急联系人"/>
			</u-form-item>	
			<u-form-item prop="emergencyContactPhone" label="紧急联系人联系方式" :required="true" label-width="150" borderBottom>
				<u-input v-model="form.emergencyContactPhone" border="none" placeholder="必须填写紧急联系人联系方式"/>
			</u-form-item>
			<u-form-item prop="address" label="居住地址" :required="true" label-width="100" borderBottom>
				<u-input v-model="form.address" border="none" placeholder="必须填写居住地址"/>
			</u-form-item>
			<u-form-item prop="qualificationCertificateNum" label="从业资格证编号" :required="true" label-width="120" borderBottom>
				<u-input v-model="form.qualificationCertificateNum" border="none" placeholder="必须填写从业资格证编号"/>
			</u-form-item>
			<u-form-item prop="creditCardNum" label="银行卡号" :required="true" label-width="100" borderBottom>
				<u-input v-model="form.creditCardNum" border="none" placeholder="必须填写银行卡号"/>
			</u-form-item>
	
			<u-form-item prop="idCardObvImg" label="身份证正面" label-width="130" :required="true">
				<u-upload
						:fileList="images.idCardObvImg"
						@afterRead="(event) => afterRead(event, 'idCardObvImg')"
						@delete="(event) => deletePic(event, 'idCardObvImg')"
						name="1"
						multiple
						:maxCount="1"
					/>
			</u-form-item>
			<u-form-item prop="idCardRevImg" label="身份证反面" label-width="100" :required="true">
			<u-upload
					:fileList="images.idCardRevImg"
					@afterRead="(event) => afterRead(event, 'idCardRevImg')"
					@delete="(event) => deletePic(event, 'idCardRevImg')"
					name="2"
					multiple
					:maxCount="1"
				/>
			</u-form-item>
			<u-form-item prop="drivingLicenseImg" label="驾驶证" label-width="140" :required="true">
				<u-upload
						:fileList="images.drivingLicenseImg"
						@afterRead="(event) => afterRead(event, 'drivingLicenseImg')"
						@delete="(event) => deletePic(event, 'drivingLicenseImg')"
						name="3"
						multiple
						:maxCount="1"
					/>
			</u-form-item>
			<u-form-item prop="transportPermitImg" label="道路运输从业资格证" label-width="140" :required="true">
				<u-upload
						:fileList="images.transportPermitImg"
						@afterRead="(event) => afterRead(event, 'transportPermitImg')"
						@delete="(event) => deletePic(event, 'transportPermitImg')"
						name="3"
						multiple
						:maxCount="1"
					/>
			</u-form-item>
			<u-form-item prop="peopleLicenseImg" label="人证合一(身份证)" label-width="140" :required="true">
				<u-upload
						:fileList="images.peopleLicenseImg"
						@afterRead="(event) => afterRead(event, 'peopleLicenseImg')"
						@delete="(event) => deletePic(event, 'peopleLicenseImg')"
						name="3"
						multiple
						:maxCount="1"
					/>
			</u-form-item>
		</u-form>
		<u-button type="primary" @click="submit">提交</u-button>
	</view>
</template>

<style>

</style>
